<template>
    <div style="position: relative;">
        <div class="bd_box">
            <div v-for="(item,index) in renderImages" :key="index" class="item_box">
                <div class="center-box">
                    <img :style="{'filter':(color===0?'grayscale(1)':'none')}" :src="item.image">
                </div>
                <div :class="item.isChecked?'mask':'ischecked_mask'">
                    <span @click="modify(index)">{{index+1}}</span>
                </div>
            </div>
        </div>
        <div class="ft_box">
            <div class="ft_txt">
                已选页面:
                <span v-if="printPages.length===0">请选择</span>
                <div v-else class="ischoose">
                    <div v-if="isContinuous">1-{{ printPages.length }}</div>
                    <div v-else>{{ printPages }}</div>
                </div>
            </div>
            <div class="ft_btn_box">
                <button class="all-btn" v-if="isAll" @click="chooseAll">全选</button>
                <button class="not-all-btn" v-else @click="NotChooseAll">全不选</button>
                <button class="sure-btn" @click="submitModify">确定({{printPages.length}})</button>
            </div>
        </div>
    </div>
</template>

<script>
import { useRoute } from 'vue-router';
import { covertPdfToimage } from "../../assets/js/pdf"
import wx from "weixin-js-sdk"
export default{
    name:"choosePdfPage",
    data(){
        return {
            renderImages:[],
            printPages:[],
            isAll:null,
            isContinuous:null,
            color:0
        }
    },
    created(){
        const that=this
        const route=useRoute()
        const url=route.query.url
        this.color=Number(route.query.color)
        this.printPages=JSON.parse(route.query.printPages)
        covertPdfToimage(url).then(data=>{
            for(let i=0;i<data.length;i++){
                const isChecked=that.printPages.includes(i+1)
                that.renderImages.push({image:data[i],isChecked:isChecked})
            }
            that.isChooseAllImage()
            that.updatePrintPage()
        })
    },
    methods:{
        modify(index){
            const that=this
            that.renderImages[index].isChecked=!that.renderImages[index].isChecked
            that.isChooseAllImage()
            that.updatePrintPage()
        },
        isChooseAllImage(){
            const that=this
            that.isAll=false
            that.renderImages.forEach(i=>{
                if(i.isChecked===false){
                    that.isAll=true
                }
            })
        },
        NotChooseAll(){
            const that=this
            that.renderImages.forEach((i,index)=>{
                that.renderImages[index].isChecked=false
            })
            that.isChooseAllImage()
            that.updatePrintPage()
        },
        chooseAll(){
            const that=this
            this.renderImages.forEach((i,index)=>{
                that.renderImages[index].isChecked=true
            })
            that.isChooseAllImage()
            that.updatePrintPage()
        },
        updatePrintPage(){
            const that=this
            that.printPages=[]
            that.renderImages.forEach((i,index)=>{
                if(i.isChecked===true){
                    that.printPages.push(index+1)
                }
            })
            // console.log("list",that.printPages)
            const is=that.renderImages.length===that.printPages.length
            that.isContinuous=is
        },
        submitModify(){
            const that=this
            const printPages=JSON.stringify(that.printPages)
            wx.miniProgram.postMessage({
                printPages:printPages
            })
            wx.miniProgram.redirectTo({
                url:"/pages/printingType/wordAndPicture/wordAndPicture?choosePreviewReturn="+printPages
            })
        }
        
    }
}
</script>

<style>
.bd_box{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 15px;
    padding-bottom: 20%;
}
.item_box{
    position: relative;
}
.center-box{
    margin: 0 5%;
    position: relative;
}
.mask{
    margin: 0 5%;
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.4);
    width: 90%;
    position: absolute;
    top: 0;
}
.mask span{
    float: right;
    width: 30px;
    height: 30px;
    background-color: #0097e3;
    text-align: center;
    border-radius: 50%;
    line-height: 30px;
    color: #fff;
    border: 1px solid #fff;
    margin-right: 5px;
    margin-top: 5px;
}
.ischecked_mask{
    margin: 0 5%;
    aspect-ratio: 1 / 1;
    width: 90%;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0);
}
.ischecked_mask span{
    float: right;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    border-radius: 50%;
    line-height: 30px;
    color: #efefef;
    border: 1px solid #fff;
    margin-right: 5px;
    margin-top: 5px;
}

.center-box img{
    width: 100%;
    /* 长宽一比一 */
    aspect-ratio: 1/1;
}
.ft_box{
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 10px;
    height: 5%;
    font-size: 18px;
    align-items: center;
}
.ft_txt{
    width: 50%;
    color: #bbb;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* display: flex;
    align-items: center; */
}
.ischoose{
    display: flex;
    overflow: hidden;
}
.ischoose div{
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft_btn_box{
    width: 45%;
    display: flex;
}
.ft_btn_box button{
    padding: 2% 8%;
    margin: 0 6px;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 7px;
    border: none;
}
.sure-btn{
    background-color: #0097e3;
    color: #fff;
}
.not-all-btn{
    background-color: red;
    color: #fff;
}
</style>